<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>在组件使用mixins</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .super{
            filter: hue-rotate(120deg);
        }
    </style>
</head>

<body>

    <div id="app">
        <man></man>
        <cat></cat>
    </div>

    <script>
        var superPowerMixin = {
            data() {
                return {
                    superPowers: false
                }
            },
            methods: {
                superMe() {
                    // 在父元素中增加类super
                    this.$el.classList.add("super")
                    this.superPowers = true
                }
            },
            created() {
                this.$options.template =
                    `<div><h3 v-show="superPowers">super</h3>` +
                    this.$options.template +
                    `<button @click="superMe" v-if="!superPowers">Super!</button></div>`
            }
        }

        Vue.component('man', {
            template: '<p>👨man</p>',
            mixins: [superPowerMixin]
        });
        Vue.component('cat', {
            template: '<p>🐱cat</p>',
            mixins: [superPowerMixin]
        });
        new Vue({
            el: '#app'
        })
    </script>

</body>

</html>